﻿@page "/component/feedback/toast"
@inject IToastService ToastService

<ToastContainer  />

<Pager DataSource="@(new List<string>(new[]
                     {
                         "Demo","Configuration","Key", "ToastContainer Parameters"
                     }))">
    <Body>
        <Header1>
            Toast
            <SubHeader>
                A toast allows users to be notified of an event
            </SubHeader>
        </Header1>

        <Message State="State.Warning">
            <List Ordered>
                <Item>
                    Make use you have a component of <code>BlamanticUIContainer </code> in your page. See configuration at <a href="/">step 5</a>.
                </Item>
                <Item>
                    Inject service <code>IToastService</code>
                </Item>
            </List>
        </Message>
        <PresentationPart Title="Demo">
            <RunTemplate>
                <Button @onclick="@(()=>ToastService.Show("Default message"))">Default</Button>
                <Button Color="Color.Red" @onclick="@(()=>ToastService.ShowError("Some errors"))">Error</Button>
                <Button Color="Color.Yellow" @onclick="@(()=>ToastService.ShowWarning("Attention please"))">Warning</Button>
                <Button Color="Color.Blue" @onclick="@(()=>ToastService.ShowInfo("Please go a way"))">Info</Button>
                <Button Color="Color.Green" @onclick="@(()=>ToastService.ShowSuccess("Submit successfully"))">Success</Button>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<ToastContainer />

<Button @onclick=""@(() => ToastService.Show(""Default message""))"">Default</Button>
<Button Color=""Color.Red"" @onclick=""@(()=>ToastService.ShowError(""Some errors""))"">Error</Button>
<Button Color=""Color.Yellow"" @onclick=""@(()=>ToastService.ShowWarning(""Attention please""))"">Warning</Button>
<Button Color=""Color.Blue"" @onclick=""@(()=>ToastService.ShowInfo(""Please go a way""))"">Info</Button>
<Button Color=""Color.Green"" @onclick=""@(()=>ToastService.ShowSuccess(""Submit successfully！""))"">Success</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Configuration">
            <Description>
                You can customize toast by configuration
            </Description>
            <RunTemplate>
                <Button Color="Color.Pink" @onclick="@(()=>ToastService.Show(options=> {
                                                  options.Message = "Pink message";
                                                  options.Color = Color.Pink;
                                              }))">
                    Pink
                </Button>
                <Button Color="Color.Olive" @onclick="@(()=>ToastService.Show(options=> {
                                                   options.Title = "Title";
                                                   options.Message = "Sing a song";
                                                   options.Color = Color.Olive;
                                               }))">
                    Olive
                </Button>
                    <Button Color="Color.Black" @onclick="@(()=>ToastService.Show(options=> {
                                                                options.Color = Color.Blue;
                                                                options.Message = "I have a icon";
                                                                options.IconClass="chart";
                                                            }))">
                        Custom Icon
                    </Button>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Button Color=""Color.Pink"" @onclick=""@(()=>ToastService.Show(options=> {
                                    options.Message = ""Pink message"";
                                    options.Color = Color.Pink;
                                }))"">
    Pink
</Button>
<Button Color=""Color.Olive"" @onclick=""@(()=>ToastService.Show(options=> {
                                    options.Title = ""Title"";
                                    options.Message = ""Sing a song"";
                                    options.Color = Color.Olive;
                                }))"">
    Olive
</Button>
<Button Color=""Color.Black"" @onclick=""@(()=>ToastService.Show(options=> {
                                            options.Color = Color.Blue;
                                            options.Message = ""I have a icon"";
                                            options.IconClass=""chart"";
                                        }))"">
    Custom Icon
</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Position">
            <Description>
                Set <code>Position</code> parameter in <code>ToastContainer</code> can show toast message in different position.
            </Description>
            <RunTemplate>
                <ToastContainer Key="TopRight" Position="DockPosition.TopRight"/>
                <Button Color="Color.Red" @onclick="@(e=>ToastService.ShowSuccess("I'm at the top right position",key:"TopRight"))">Top Right</Button>
                
                <ToastContainer Key="BottomRight" Position="DockPosition.BottomRight"/>
                <Button Color="Color.Blue" @onclick="@(e=>ToastService.ShowInfo("Hello world",key:"BottomRight"))">Bottom Right</Button>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<ToastContainer Key=""TopRight"" Position=""DockPosition.TopRight""/>
<Button Color=""Color.Red"" @onclick=""@(e=>ToastService.ShowSuccess(""I'm at the top right position"",key:""TopRight""))"">Top Right</Button>
                
<ToastContainer Key=""BottomRight"" Position=""DockPosition.BottomRight""/>
<Button Color=""Color.Blue"" @onclick=""@(e=>ToastService.ShowInfo(""Hello world"",key:""BottomRight""))"">Bottom Right</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>